<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 设置IE渲染方式默认为最高 除IE6： -->
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<!-- 兼容移动设备的展示效果： -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<!-- 若页面需默认用极速核，增加标签： -->
	<meta name="renderer" content="webkit">

	<title>My Works</title>

	<!-- 引入CSS -->
    <link href="css/myworks.css" rel="stylesheet">

    <!-- 加载兼容文件：因为IE8既不支持HTML5 也不支持CSS3 Media，所以需要加载两个JS文件，来保证代码实现兼容效果：2017-06-30更新 -->
    <!-- WARNING: Respond.js 不能通过 file:// 协议访问 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
		.header { height: 200px; text-align: center; letter-spacing: .1em; padding-top: 20px; }
		.header h2 { color: #FFDEDC; }
		.header code { color: #fff; }

		.works { width: 100%; height: 56%; overflow: hidden; position: relative; }
		.works:after { content: ''; position: absolute; left: 25%; top: 25%; display: block; width: 50%; height: 50%; border: solid 1px #fff; opacity: 0; transition: .3s; }
		.works > img { display: block; width: 100%; cursor: pointer; }
		
		@media (min-width: 768px) {
		    .works:hover:after { transform: scale(1.8); opacity: 1; }
		}
    </style>
</head>
<body>
	
	<header style="background: url('images/header.png') no-repeat center;">
		<div class="header"><div class="col col-x-12"><h2 class="fadeInUp">你好，我叫 <code>谢婉玉</code> ,是一名 <code>设计师</code> 和 <code>Web前端开发</code> 。</h2></div></div>
	</header>
	<section style="margin-bottom: 50px;">
		<div class="container">
			<div class="col col-x-12"><h2></h2></div>
			<div class="col col-x-12 col-m-6">
				<!-- <h2 class="title">Web</h2> -->
				<a href="web.html" target="blank"><div class="works">
					<img src="images/web.jpg" alt="WebUI">
				</div></a>
				<p class="note">这里有我的部分网站设计</p>
			</div>
			<div class="col col-x-12 col-m-6">
				<!-- <h2 class="title">Visual</h2> -->
				<a href="graphic.html" target="blank"><div class="works">
					<img src="images/graphic.jpg" alt="Graphic">
				</div></a>
				<p class="note">这里有我的部分平面设计</p>
			</div>
			<div class="col col-x-12"><h2></h2></div>
			<div class="col col-x-12 col-m-6">
				<!-- <h2 class="title">AE</h2> -->
				<a href="ae.html" target="blank"><div class="works">
					<img src="images/ae.jpg" alt="AE">
				</div></a>
				<p class="note">这里有我的部分AE动画练习</p>
			</div>
			<div class="col col-x-12 col-m-6">
				<!-- <h2 class="title">Others</h2> -->
				<a href="others.html" target="blank"><div class="works">
					<img src="images/others.jpg" alt="Others">
				</div></a>
				<p class="note">这里有我的部分临摹和练习</p>
			</div>
		</div>
	</section>


	<!-- jQuery (necessary for JavaScript plugins) -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- mui js -->
    
    <!-- 表单验证 -->
    
    
</body>
</html>